*{
  padding: 0%;
  margin: 0%;
  box-sizing: border-box;
}

/* 月样式 */
.calendar-month{
  margin: 100px auto;
  width: 1000px;
  height: 750px;
  border: 1px solid #000;
  /* display: none; */
}

.title{
  height: 70px;
  position: relative;
  text-align: center;
  float: right;
}

.select{
  float: left;
  line-height: 70px;
  margin-right: 20px;
}

.select-year{
  width: 70px;
  height: 40px;
  font-size: 16px;
}

.select-month{
  width: 70px;
  height: 40px;
  font-size: 16px;
}

.change1{
  width: 70px;
  height: 40px;
  display: flex;
  justify-content: center;
  float: left;
  margin-right: 20px;
  margin-top: 15px;
}

.change1 div{
  float: left;
  width: 50%;
  height: 100%;
  text-align: center;
  line-height: 40px;
  font-size: 16px;
  cursor: pointer;
  border: 1px solid #565656;
}

.change-active{
  border: 2px solid #40a9ff !important;
  color: #40a9ff;
  z-index: 5;
}

.body-list ul{
  font-size: 14px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  width: 100%;
  float: left;
  margin: 0 20px;
}  

.body-list ul li{
  list-style: none;
  display: block;
  /*(960-20*7)/7 = 11.71%*/
  width: 11.71%;
  float: left;
  height: 100px;
  line-height: 100px;
  text-align: center;
  border-top: 1px solid #ccc;
  margin: 0 10px;
}

#week li{
  height: 50px;
  line-height: 50px;
  border-top: none;
}

#days li{
  cursor: pointer;
}


/*浅灰色显示其他月份日期*/
.lightgrey{ 
color:#a8a8a8;
}

/*深灰色显示当前日期*/
.darkgrey{ 
color:#565656;
}

/* 当天日期加上头部border */
.blue{ 
  border-top: 2px solid rgb(24, 144, 255) !important;
}

/*点击日期用蓝色背景蓝色文字加以显示*/
.bluebox{
  border: 1px solid #e6f7ff;
  background: #e6f7ff;
  color:#40a9ff;
}



/* 年样式 */
.calendar-year{
  margin: 100px auto;
  width: 1000px;
  height: 750px;
  border: 1px solid #000;
  display: none;
}

.body-month .body-list ul li{
  list-style: none;
  display: block;
  /*(960-10*3)/3
   = 31%*/
  width: 31%;
  float: left;
  height: 150px;
  line-height: 150px;
  text-align: center;
  border-top: 1px solid #ccc;
  margin: 0 5px;
  cursor: pointer;
  margin-top: 10px;
}

.change2{
  width: 70px;
  height: 40px;
  display: flex;
  justify-content: center;
  float: left;
  margin-right: 20px;
  margin-top: 15px;
}

.change2 div{
  float: left;
  width: 50%;
  height: 100%;
  text-align: center;
  line-height: 40px;
  font-size: 16px;
  cursor: pointer;
  border: 1px solid #565656;
}
